<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--表单-->
          <el-button type="primary" style="float:right;margin-bottom: 22px;" @click="AddMenuGroup('add')">添加菜单</el-button>
        <!--表格-->
        <el-table
          :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
          style="width: 100%;margin-bottom: 20px;"
          row-key="menu_ID"
          border
          :tree-props="{children: 'subMenu'}">
          <el-table-column
            prop="menu_NAME"
            label="菜单名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="menu_URL"
            label="菜单地址"
            width="180">
          </el-table-column>
          <el-table-column
            prop="menu_TYPE"
            label="菜单类型"
            width="180"
            :formatter="formatType">
          </el-table-column>
          <el-table-column
            prop="menu_ICON"
            label="菜单ICON"
            width="180">
          </el-table-column>
          <el-table-column
            prop="menu_ORDER"
            label="菜单排序">
          </el-table-column>
          <el-table-column label="" fixed="right" width="220">
            <template scope="scope">
              <el-button v-if="scope.row.parent_ID==0" type="primary" size="small" @click="addSubMenu('add',scope.row)">添加</el-button>
              <el-button type="primary" size="small" @click="editMenu('update',scope.row)">修改</el-button>
              <el-button v-if="scope.row.menu_ID!=1" type="danger" size="small" @click="deleteMenu(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <menu-edit ref="menuDialog"
      :visible.sync="menuVisible"
      :menu="menu"
      :operation="operation"
      @confirm="confirmMenu"
    />
  </section>

</template>
<script>
import debounce from 'lodash.debounce';
import { menuManageService } from '@/services';
import menuEdit from '@/views/organization/menu/menuEdit';
export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        menu: {},
        menuVisible: false,
        operation: 'add',
      }
    },
    activated () {
       this.getMenuList();
    },
    components: { menuEdit },
    watch:{
      menuVisible(val, oldVal){//普通的watch监听
          if(val==true){
            this.$refs.menuDialog.resetForm();
          }
      },
  },
    methods: {
        getMenuList: debounce(async function() {
        this.tableData = await menuManageService.getMenuList();

        }, 500),
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-next-line
            console.log(`当前页: ${val}`);
          }
        },
        formatType(row, column) {
          if(row.menu_TYPE==='1') return '系统菜单';
          else
          return '业务菜单';
        },
        addSubMenu (operation,row) {
          this.operation = operation;
          var menu = {"parent_id":row.menu_ID,"menu_ORDER":1};
          this.menu = Object.assign({},menu);
          this.menuVisible = true;
        },
        editMenu (operation,row) {
          this.operation = operation;
          this.menu = Object.assign({},row);
          this.menuVisible = true;
        },
       async deleteMenu (row) {
          try {
            await this.$confirm('是否确认删除此菜单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            });
          await menuManageService.delMenu(row);
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getMenuList();
          } catch (e) {
            console.error(e);
          }
        },
        AddMenuGroup (operation) {
          this.operation = operation;
          var menu = {"parent_id":0,"menu_ORDER":1};
          this.menu = Object.assign({},menu);
          this.menuVisible = true;
        },
        confirmMenu () {
          this.getMenuList();
          this.menuVisible = false;
        },
    }
}
</script>
<style>
  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }
  .el-message-box__btns .cancel {
    float: right;
    margin-left: 10px;
  }
</style>